パブリックプレビューになった Microsoft Playwright Testing を使って Playwright テストを並列実行してみた

#Microsoft Azure

いわさ

2023.10.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

いわさです。

Web E2E テストを行うためのフレームワークには様々なものが存在しますが、その中のひとつに Microsoft が開発した Playwright というものがあります。

Playwright は Chromium、Firefox、WebKit のレンダリングエンジンをサポートしており、クロスプラットフォーム環境で使用することが出来ます。

Playwright のテストランナーは並列ワーカーの実行をサポートしており、大規模な E2E テストを CI/CD の中で実行する場合でも効率的に実行することが出来ます。
しかし、並列ワーカーを増やしたとしても CI/CD ワーカーのコア数など限度があり、テスト対象のブラウザやオペレーティングシステムの組み合わせやテスト規模が増えることによって、E2E テスト完了までの時間が増加する悩みがあります。

Azure 上の Playwright 実行環境「Microsoft Playwright Testing」

この問題を解決するアプローチのひとつとして Microsoft Playwright Testing というサービスがあります。
先日までプライベートプレビューで提供されていたのですが、最近パブリックプレビューで提供されるようになりました。

このサービスは Azure 上のマネージドサービスとして提供されており、次の構成図が示すように Playwright のワーカー環境をクラウド (Microsoft Azure) 上にオフロード出来るサービスとなっており、大規模な並列実行を構成することでテスト時間の短縮が期待出来ます。

引用元：What is Microsoft Playwright Testing? - Microsoft Playwright Testing | Microsoft Learn

本日は Microsoft Playwright Testing を導入して使ってみたので構成の流れなどを紹介したいと思います。

Azure 上のサービスとして構成

Azure ポータルから、あるいは Microsoft Playwright Testing 専用のポータルから構成が可能です。
導入方法ですが、ワークスペースを作成してトークンを発行し、あとは Playwright 実行環境でサービス構成を設定する流れとなります。

ポータルへは Playwright Service からサインイン出来ます。

ワークスペースの作成

Azure アカウントでサインインします。

サインイン出来たら、Azure サブスクリプションを選択してワークスペースを作成します。
料金については後述しますが、Azure サブスクリプションを通して料金が発生します。

ワークスペース情報としては、ワークスペース名と対象の Azure サブスクリプション、そしてリージョンを選択します。
リージョンは本日時点では次の 4 つのリージョンが選択出来ました。

なお、ワーカーが実行されるリージョンについては選択したリージョンで実行するか、あるいは最寄りのリージョンを自動選択されるか構成出来ます。後ほど説明します。
おそらくここで選択するリージョンはサービスのコントロールプレーンが実行されるリージョンなのかなと思います。

数秒でワークスペースが作成されると、実行環境のオンボーディング用の画面に遷移します。

なお、Azure ポータルからもワークスペース作成は可能です。
Playwright Testing サービスを探し、ワークスペースを作成することが出来ます。

どちらで作成した場合でもワークスペースは Azure 上でリソースとして管理することが出来ます。

Azure ポータルの場合は Overview からダッシュボード URL を取得してオンボーディング画面に遷移することが出来ます。

なお、Azure メニューの Region Management でテストが実行されるワーカーのリージョンを選択することが出来ます。

テスト環境を用意

Microsoft Playwright Testing はリモートワーカー環境を提供してくれるサービスなので、実行させるテストスクリプトや Playwright コマンドの実行環境は従来どおり準備が必要です。

Playwright の基本的な流れとしては初期設定・テストの作成・テストの実行となっています。

なお、本記事は以下のローカル環境に Playwright をセットアップしました。

% system_profiler SPSoftwareDataType SPHardwareDataType                                    
Software:
    System Software Overview:

      System Version: macOS 13.5.2 (22G91)
      Kernel Version: Darwin 22.6.0
:

Hardware:
    Hardware Overview:
      Model Name: MacBook Pro
      Model Identifier: MacBookPro18,4
      Model Number: Z15G001R1J/A
      Chip: Apple M1 Max
      Total Number of Cores: 10 (8 performance and 2 efficiency)
      Memory: 32 GB
:

インストール

% npm init playwright@latest
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
:

次のように環境が初期設定されました。

テスト実行

初期状態でexampla.spec.tsというテストスクリプトが用意されておりすぐに実行が可能です。

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

テストの内容は`https://playwright.dev/`にアクセスしてタイトルを確認し「Get Started」リンクを押して遷移先画面のheadingタグを確認しています。

次のコマンドで実行することが出来ます。

 % npx playwright test     

Running 6 tests using 5 workers
  6 passed (5.7s)

To open last HTML report run:

  npx playwright show-report

ちなみに、レポートも確認することが出来ます。なかなか良さげ。

Microsoft Playwright Testing で動作出来るようにする

ここまででローカル実行を試すことが出来ましたので、次はリモートワーカーで実行したいと思います。
手順はダッシュボードのオンボーディング手順に従えば良いです。

まずはサービス構成ファイルをplaywright.config.tsと同じ場所に配置します。
以下からダウンロードが可能です。

スクリプトの中ではアクセストークンとサービスエンドポイントの 2 つの環境変数を参照していますので、続いてそれらを構成します。

ダッシュボード上から Bash あるいは PowerShell 用に値つきでコマンドを取得出来ますのでそのまま実行します。

% export PLAYWRIGHT_SERVICE_ACCESS_TOKEN=eyJhbGci ... 0JIRh57Q
% export PLAYWRIGHT_SERVICE_URL=wss://eastasia.api.playwright.microsoft.com/api/authorize/connectSession

リモートワーカーで実行してみる

これでクラウド上で実行出来るようになったので並列ワーカーを指定して実行してみます。
実行時にサービス構成ファイルの指定が必要です。
なお、今回試していませんが Visual Studio Code の Playwright 拡張では自動でサービス構成を認識してくれるようです。

% npx playwright test --config=playwright.service.config.ts --workers=2 

Running 6 tests using 2 workers
  6 passed (28.0s)

To open last HTML report run:

  npx playwright show-report

コマンド上は実行出来ました。
ワークスペースを確認してみるとアクティビティログが追加されていることが確認出来ます。ステータスはin Progressです。